<template>
	<view class="addressList">
		<leftAndRightFlex v-for="(item,i) in props.data2" :key="i" @click="select(i,item.id)" :style="(selecti===undefined&&props.select&&item.defaultAddress)||(selecti==i&&props.select)?'border:1px solid #ccc;'+'padding:20rpx;box-sizing:border-box;':''+'padding:20rpx;box-sizing:border-box;'">
			<template v-slot:left>
				<view style="display:flex;width:510rpx;font-size:30rpx;font-weight:bold;">
					<u18ellipsis :text="item.name" :lineNum="1" w="180rpx"></u18ellipsis>
					<u18ellipsis :text="item.phone" :lineNum="1" w="220rpx"></u18ellipsis>
					<u18Tag text="默认" v-if="item.defaultAddress"></u18Tag>
				</view>
				<view style="margin-top:10rpx;color:#444;">
					{{item.ssq+item.address}}
				</view>
			</template>
			
			<template v-slot:right>
				<view style="width:140rpx" class="operate">
					<text @click="update(item.id)">编辑</text>
					<text @click="del(item.id)">删除</text>
				</view>
			</template>
		</leftAndRightFlex>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import leftAndRightFlex from "./leftAndRightFlex.vue";
	import u18ellipsis from "./18ellipsis.vue";
	import u18Tag from "./18tag.vue";
	const props = defineProps([
		'data2',
		'select'
	])
	const emit = defineEmits({
		handlerDel:(e)=>{},
		handlerSelect:e=>{}
	})
	function del(id){
		emit('handlerDel',id)
	}
	function update(id){
		uni.navigateTo({
			url:'cAddress?id='+id
		})
	}
	const selecti = ref(undefined);
	function select(i,id){
		selecti.value = i
		emit('handlerSelect',{i,id})
	}
</script>

<style lang="scss">
	.addressList{
		width:690rpx;
		margin:0 auto;
		padding:20rpx;
		background: #fff;
		border-radius:20rpx;
	}
	.operate{
		display:flex;
		justify-content:space-between;
		&>text{
			color:#4d85ff;
		}
	}

</style>